<template>
	<view>
		<view class="title">
			
			<input class='password-change-input' type="text" value="" v-model="cardid" placeholder="请输入卡号" @input="cardId" />
		</view>
		<button class='password-change-button' hover-class='password-change-button-hover' @click='onSetting'>确认绑卡</button>
	</view>
</template>

<script>
	import apis from '../../../api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	export default {
		
		data() {
			return {
				cardid:'',
				code:''
			}
		},
		onLoad() {
			var that=this
			that.code = that.userInfo.wechat;
			/*戴工修改了语法
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息
					//console.log(loginRes)
					that.code = loginRes.code
				}
			});
			*/
		},
		computed:{
			...mapState(['userInfo']),
		},	
		methods: {
			cardId(e) {
				this.cardid = e.detail.value
			},
			onSetting(){
				apis.saveUserCard({
					"code":this.code,
					"cardid":this.cardid
				}).then(res=>{
					console.log(res)
					
				})
			}
		}
	}
</script>

<style scoped>
page{
		background-color: #F1F1F1;
	}
	.title{
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: center;
	}
	.password-change-input{
		width: 95%;
		height: 100rpx;
		border-radius: 15rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 0rpx 10rpx 0rpx 10rpx;
	}
	.password-change-button{
		width: calc(100% - 40rpx);
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;		
		margin-top: 20rpx;
		background-color: #00b9ef;
		color: white;
	}
	.password-change-button::after{
		border: none;
	}
	.password-change-button-hover{
		background-color: rgba(0, 185, 239, 0.7); 
	}
</style>
